<template>
  <div id="app">

    <!--    顶部模糊查询-->
    <div class="tou" v-if="topInputShow">
      <label>业主昵称</label>
      <el-input v-model="select.ownerNickname" style="width: 200px;height: 32px"></el-input>
      <label>业主姓名</label>
      <el-input v-model="select.ownerRealName" style="width: 200px;height: 32px"></el-input>
      <label>业主电话</label>
      <el-input v-model="select.ownerPhoneNumber" style="width: 200px;height: 32px"></el-input>
      <el-button type="success" @click="localInteraction(1)" style="width: 93px;height: 35px;line-height: 10px"
                 icon="el-icon-search">搜索
      </el-button>
      <el-button type="danger" style="width: 93px;height: 35px;line-height: 10px" @click="reset" icon="el-icon-refresh">
        重置
      </el-button>
      <!--  按钮行-->
    </div>
    <div class="but">
      <el-button type="success" @click="deleteRoles" style="width: 93px;height: 35px;line-height: 10px"
                 icon="el-icon-delete">删除
      </el-button>
      <el-button type="info" style="width: 93px;height: 35px;line-height: 10px;" @click="outExe"
                 icon="el-icon-download">导出
      </el-button>
    </div>
    <el-row class="btn-circle">
      <div>
        <el-tooltip content="隐藏搜索框" placement="top">
          <a-tooltip>
            <el-button size="small" icon="el-icon-search" circle @click="topInputShows"></el-button>
          </a-tooltip>
        </el-tooltip>
        <el-tooltip content="刷新页面" placement="top">
          <a-tooltip>
            <el-button size="small" icon="el-icon-refresh" circle @click="toIndex"></el-button>
          </a-tooltip>
        </el-tooltip>

      </div>
    </el-row>

    <el-table
        class="tab"
        :data="interactions"
        id="lzy"
        style="width: 100%"
        @selection-change="selectChange">
      <el-table-column
          width="50"
          type="selection">
      </el-table-column>
      <el-table-column
          label="序号"
          type="index"
          width="100"
          align="center">
      </el-table-column>
      <el-table-column
          label="业主昵称"
          width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyOwner.ownerNickname }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="业主姓名"
          width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyOwner.ownerRealName }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="业主电话"
          width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.zyOwner.ownerPhoneNumber }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="200">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="内容"
          width="300">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="备注"
          width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              type="text"
              icon="el-icon-s-tools"
              @click="showPost(scope.row,scope.row.zyOwner.ownerNickname,scope.row.zyOwner.ownerPortrait),
              dialogPostVisible=true"
          >更多操作
          </el-button>
          <el-button
              icon="el-icon-delete"
              size="mini"
              type="text"
              @click="deleteInteraction(scope.row.interactionId)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="localInteraction"
          :current-page="current"
          :page-sizes="[5,10,15,20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog title="社区互动详情" :visible.sync="dialogPostVisible" width="500px" append-to-body>
      <el-form ref="form" :model="interaction" label-width="80px">
        <div>
          <div class="author-title reply-father">
            <img :src="ownerPortrait" style="width: 50px;height: 50px;border-radius: 50%">
            <div class="author-info">
              <span class="author-name">{{ ownerNickname }}</span>
              <span class="author-time">{{ interaction.createTime }}</span>
            </div>
            <div class="talk-box">
              <p>
                <span class="reply">{{ interaction.content }}</span>
              </p>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPostVisible = false ">确 定</el-button>
        <el-button @click="dialogPostVisible = false ">取 消</el-button>
      </div>
    </el-dialog>


  </div>


</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";

export default {
  name: "ZyInteractionView",
  data() {
    return {
      dialogPostVisible: false,    //默认添加角色的弹框为false
      topInputShow: true,
      interactions: null,
      deptList: null,
      current: 1,
      size: 5,
      ownerPortrait: "",    //用户头像
      select: {
        ownerNickname: "",
        ownerRealName: "",
        ownerPhoneNumber: "",
      },
      ownerNickname: "",
      pages: 0,
      total: 0,
      ids: "",
      interaction: {
        interactionId: 0,
        ownerNickname: "",
        ownerRealName: "",
        ownerPhoneNumber: "",
        createTime: "",
        content: "",
        remark: ""
      }
    }
  },
  methods: {
    localInteraction(current) {
      this.current = current;
      this.axios.get("interaction-page?current=" + this.current + "&size=" + this.size + "&ownerNickname=" + this.select.ownerNickname + "&ownerRealName=" + this.select.ownerRealName + "&ownerPhoneNumber=" + this.select.ownerPhoneNumber)
          .then(result => {
            this.interactions = result.data.data.records;
            this.pages = result.data.data.pages;
            this.total = result.data.data.total;
          })
    },
    deleteInteraction(interactionId) {
      this.axios.delete("interaction/" + interactionId)
          .then(result => {
            if (result.data.code == 200) {
              this.localInteraction(this.current);
            }

          })
      this.axios.get("dept-tree")
          .then(result => {
            this.depts = result.data.data;
          })
    },
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {

            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#lzy").removeChild(fix), xlsxParam);
        document.querySelector("#lzy").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#lzy"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
    //隐藏模糊查询，刷新
    topInputShows() {
      this.topInputShow = !this.topInputShow;
    },
    toIndex() {
      this.$router.go(0)
    },
//批量删除
    deleteRoles() {
      this.axios.delete("interactions/" + this.ids)
          .then(res => {
            if (res.data.code == 200) {
              this.localInteraction(this.current);
            }
          })
    },
    showPost(interaction, ownerNickname, ownerPortrait) {
      this.interaction = JSON.parse(JSON.stringify(interaction));
      this.ownerNickname = interaction.zyOwner.ownerNickname;

      this.ownerPortrait = interaction.zyOwner.ownerPortrait
      // this.ownerPortrait = ownerPortrait == ""?require("@/assets/image/default.gif") :ownerPortrait;
      this.dialogPostVisible = true;
    },
    reset() {
      this.ownerNickname = ""
      this.ownerRealName = ""
      this.ownerPhoneNumber = ""
      this.$router.go(0)
    },
    handleSizeChange(size) {
      console.log(`每页 ${size} 条`);
      this.size = size
      this.localInteraction(1)
    },
    selectChange(selection) {
      this.ids = selection.map(item => item.interactionId)
    }
  },

  mounted() {
    this.localInteraction(1);
  }


}
</script>

<style scoped>
.but {
  position: absolute;
  margin-top: 54px;
}

.tou {
  position: relative;

}

.tab {
  position: absolute;
  margin-top: 100px;
}

.page {
  position: absolute;
  float: right;
  margin-top: 600px;
  margin-left: 1000px;
}

.btn-circle {
  position: relative;
  margin-left: 1200px;
}
</style>